<script setup lang="ts">
import StrategyComponent from "@renderer/views/strategy/Strategy.vue"
import {onMounted, onUnmounted} from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const openwin = (url:string, userinfo:number) => {
    router.push({ path: url, query: { userinfo: userinfo } })
}

const keyUpActions = (e: KeyboardEvent)=>{
    e.preventDefault()
    switch (e.key){
        case "F1":
            openwin('/call/add', 1)
            break
        default:
            break
    }
}

onMounted(()=>{
    window.addEventListener("keyup", keyUpActions)
})

onUnmounted(()=>{
    window.removeEventListener("keyup", keyUpActions)
})

</script>

<template>
    <div class="table">
        <div>
            <div class="tool-container float-left">
                <el-button size="default" type="primary" @click="openwin('/call/add', 2)">盘中买入&nbsp;F1</el-button>
                <el-button size="default" type="primary"  >竞价买入&nbsp;F2</el-button>
                <el-button size="default" type="danger">卖出方案&nbsp;F3</el-button>
            </div>
            <div class="tool-container float-right">
                <el-button size="default"  type="danger">停掉所有</el-button>
                <el-button size="default" type="primary">撤掉所有</el-button>
            </div>
        </div>
        <strategy-component/>
    </div>

</template>

<style scoped lang="scss">
.table {
    width: 100%;
    height: 100%;

    .tool-container {
        display: inline-flex;
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }
    .el-pagination {
        margin-top: 12px;
    }
}
</style>
